import React, {Component} from 'react';
import {connect} from 'react-redux';
import {nanoid} from 'nanoid';
import { createAddPersonAction } from '../../redux/actions/person';

class Person extends Component {
	// 添加
	addPerson = () => {
		const {inputName} = this;
		const {inputAge} = this;
		const perObj = {id: nanoid(), name: inputName.value, age: inputAge.value};
		this.props.addPerson(perObj)
	};

	render() {
		return (
			<div>
				<h1>我是Person组件</h1>
				<input type="text" placeholder="请输入姓名" ref={c => (this.inputName = c)} />
				<input type="text" placeholder="请输入年龄" ref={c => (this.inputAge = c)} />
				<button onClick={this.addPerson}>添加</button>
				<ul>
					{this.props.person.map(item => {
						return (
							<li key={item.id}>
								名字:{item.name}--年龄:{item.age}
							</li>
						);
					})}
				</ul>
			</div>
		);
	}
}

// 使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => {
		return {person: state.person};
	},
	{addPerson:createAddPersonAction} // 究极简写
)(Person);
